<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多彩网页时钟</title>
		<style>
			div {
				position: relative;
				width: 400px;
				height: 400px;
				background-image: url(../js素材/time.jpg);
				text-align: center;
			}

			/* div img{
			position: absolute;
		} */
			div span {
				position: absolute;
				line-height: 400px;
				left: 6.25rem;
				right: 100px;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<span id="sp"></span>
		</div>

		<script>
		function getColor(){
			var red=Math.random()*256;
			red=Math.floor(red);
			var green=Math.random()*256;
			green=Math.floor(green);
			var blue=Math.random()*256;
			blue=Math.floor(blue);
			return "rgb("+red+","+green+","+blue+")";
		}
			function count() {
				var time = new Date();
				var hour = time.getHours();
				var min = time.getMinutes();
				var scend = time.getSeconds();
				if (hour < 10) {
					hour = "0" + hour;
				}
				if (min < 10) {
					min = "0" + min;
				}
				if (scend < 10) {
					scend = "0" + scend;
				}
				
				
				document.getElementById("sp").style.color=getColor();
				document.getElementById("sp").innerText=hour+":"+min+":"+scend;
				
				setTimeout("count()", 1000);
			}
			setTimeout("count()", 0);
			
		</script>
	</body>
</html>
